<template>
    <div class="mooc-container">
        <van-sticky>
            <div class="mooc-header">
                <div class="mooc-title">我的慕课</div>
                <van-tabs v-model:active="activeName" shrink @change="changeTab" line-width="24" line-height="3" title-active-color="#171A1D" title-inactive-color="#6E7074">
                    <van-tab v-for="tab in tabs" :key="tab.key">
                        <template #title><span class="tab-name">{{tab.name}}</span><span class="tab-num">{{tab.num}}</span></template>
                    </van-tab>
                </van-tabs>
            </div>
        </van-sticky>
        
        <div class="mooc-content">
            <template v-if="params.total">
                <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    :immediate-check="false"
                    :offset="params.pageSize"
                    finished-text="没有更多了"
                    @load="load"
                    >
                        <ul class="mooc-list">
                            <li class="list-item" v-for="item in list" :key="item.id" @click="goDetail(item)">
                                <div class="cover-wrap">
                                    <img class="cover" :src="item.cover" alt="">
                                    <span class="learn-status" :class="{unbegin: item.learnState === 0, learning: item.learnState === 1, completed: item.learnState === 2}">{{statusArr[item.learnState]}}</span>
                                </div>
                                <div class="list-item-content">
                                    <div class="title">{{item.moocName}}</div>
                                    <div class="learned">
                                        <span class="label">已学：</span><span class="learned-course"><span class="learned-num">{{item.hasLearnCourseWare}}</span>/共{{item.totalCourseWare}}节</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                </van-list>
            </template>
            <empty
                v-else
                :image="image"
                tip="您还未报名课程"
            />
            
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { Sticky } from 'vant';
import Empty from '@/components/empty.vue'
const route = useRoute();
const store = useStore();

const tabs = ref([
    {name:'全部', key: 1, num: 0},
    {name:'学习中', key: 2, num: 0},
    {name:'未学习', key: 3, num: 0},
    {name:'已完成', key: 4, num: 0}
])
const statusArr = ['未学习', '学习中', '已完成']
const activeName = ref()
/* 上拉加载更多... */
const list = ref([]);
const loading = ref(false);
const finished = ref(true);
const image = ref(require('@/assets/images/empty/no-homework.png'));
// 分页数据
const params = ref({
    learnState: '',
    pageIndex: 1,
    pageSize: 10,
    total: 0
})
let dom = document.getElementsByClassName('mooc-container');
const changeTab = (name) => {
    switch(name) {
        case 0:
            params.value.learnState = ''
            break;
        case 1: 
            params.value.learnState = 1
            break;
        case 2:
            params.value.learnState = 0
            break;
        case 3:
            params.value.learnState = 2
            break;
    }
    params.value.pageIndex = 1;
    list.value = []
    finished.value = true
    getMoocCount()
    getList()
}
const getList = () => {
    // loading.value = true
    G_transmit('getMyLearnengCourse', {
        name: 'getMyLearnengCourse',
        queries: {
            ...params.value,
            queryScope: 'dtBrand'
        },
        message: false
    }).then(({ data, status: { code, message } }) => {
        if (params.value.pageIndex <= 1) {
            list.value = data.rows || [];
        } else {
            list.value = list.value.concat(data.rows || []);
        }
        params.value.total = data.total;
        // if(list.value.length >= data.total) {
        //     finished.value = true
        // }
        finished.value = list.value.length >= data.total;
        setTimeout(() => {
            loading.value = false;
        }, 10);
    }).catch(err => {
        loading.value = false;
    })
}
const getMoocCount = () => {
    // loading.value = true
    G_transmit('getMoocCount', {
        name: 'getMoocCount',
        queries: {
            queryScope: 'dtBrand'
        },
        message: false
    }).then(({ data, status: { code, message } }) => {
        tabs.value[0].num = data.totalCount || 0
        tabs.value[1].num = data.ongoingCount || 0
        tabs.value[2].num = data.notBeginCount || 0
        tabs.value[3].num = data.completeCount || 0
    }).catch(err => {
    })
}
const load = () => {
    params.value.pageIndex+=1
    getList()
}

const goDetail = (item) => {
    store.dispatch('jsBridge/disposeBridge', {
        method: 'goNewPage',
        url: {
            name: 'detail',
            params: {
                moocId: item.moocId
            }
        },
        naviBarHidden: false
    })
}

onMounted(() => {
    store.dispatch('jsBridge/disposeBridge', {
        method: 'setNativeTitle',
        options: {
            // title: route.meta.title,
            naviBarHidden: false,
            showBack: false,
            extendTitle: {
                desc: '',
                name: route.meta.title,
                icon: require('@/assets/img/mooc-icon.png')
            }
        }
    });
    getMoocCount()  
    getList()
});
</script>
<style lang="scss" scoped>
.mooc-container {
    // height: 100vh;
    background: #ffffff;
    // display: flex;
    // flex-direction: column;
    .mooc-header {
        background-color: #fff;
        background-image: url(~@/assets/images/mooc-bg.png);
        background-size: 100% 80px;
        background-repeat: no-repeat;
        padding-top: 24px;
        .mooc-title {
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #171A1D;
            line-height: 27px;
            padding-left: 15px;
            margin-bottom: 8px;
        }
    }
    
    .van-tabs {
        :deep(.van-tabs__nav) {
            padding-left: 0;
            padding-right: 0;
            background: transparent;
            .van-tab {
                padding-left: 15px;
                padding-right: 15px;
                font-size: 15px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #6E7074;
                line-height: 24px;
                &.van-tab--active {
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #171A1D;
                }
                .tab-num {
                    font-size: 13px;
                    margin-left: 2px;
                }
            }
        }
        :deep(.van-tabs__line) {
            border-radius: 2px;
            background: linear-gradient(270deg, #00BDFE 0%, #0084F6 100%);
        }
        :deep(.van-tabs__wrap) {
            border-bottom: 1px solid #E0E2E4;
        }
    }
    .mooc-content {
        // flex: 1;
        // overflow-y: auto;
    }

    .mooc-list {
        .list-item {
            display: flex;
            padding: 20px 15px 0;
            .cover-wrap {
                position: relative;
                width: 115px;
                height: 64px;
                .cover {
                    width: 100%;
                    height: 100%;
                    border-radius: 4px;
                }
                .learn-status {
                    width: 38px;
                    height: 16px;
                    display: inline-block;
                    border-radius: 6px 0px 4px 0px;
                    font-size: 10px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 16px;
                    text-align: center;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    &.learning {
                        background: #00B042;
                    }
                    &.unbegin {
                        background: #FF9201;
                    }
                    &.completed {
                        background: #A2A3A4;
                    }
                }
            }
            .list-item-content {
                width: 0;
                flex: 1;
                margin-left: 12px;
                .title {
                    font-size: 15px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #171A1D;
                    line-height: 24px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: break-all;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
                .learned {
                    margin-top: 6px;
                    .label {
                        font-size: 13px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #171A1D;
                        line-height: 20px;
                    }
                    .learned-course {
                        margin-left: 4px;
                        font-size: 13px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #6E7074;
                        line-height: 20px;
                        .learned-num {
                            font-size: 24px;
                            font-family: DINAlternate-Bold, DINAlternate;
                            font-weight: bold;
                            color: #0084F6;
                            line-height: 24px;
                        }
                    }
                }
            }
        }
    }
}
</style>
